<template>
  <!-- 标题 -->
  <van-nav-bar title="分类" class="nav" fixed placeholder />
  <van-row>
    <van-col span="6">
      <!-- 左侧边栏 -->
      <van-sidebar v-model="active" @change="leftMenuChange" class="leftList">
        <van-sidebar-item :title="item.name" v-for="(item, index) in leftArr" :key="item.id" />
      </van-sidebar>
    </van-col>
    <van-col span="18">
      <!-- 右侧边栏 -->
      <div class="rightList">
        <div v-for="(item, index) in rightArr" :key="item.id">
          <h3>{{ item.name }}</h3>
          <img :src="item.coverImage" alt="手游" class="img" />
          <p>
            价格：<span>{{ item.price }}</span>
          </p>
          <!-- <p>已售：<span>{{ item.isSale }}</span></p> -->
          <!-- <div v-for="(item, index) in rightitemArr" :key="item.id">
              <img :src="item.coverImage" alt="" />
              <span>{{ item.name }}</span>
            </div> -->
        </div>
      </div>
    </van-col>
  </van-row>
</template>

<script setup>
import axios from "axios"
import { ref } from "vue"
let active = ref(0)
// 查看分类数据
let leftArr = ref()
function loadList() {
  axios.get("http://localhost:1337/api/v1/product_categories").then((r) => {
    console.log(r.data.data)
    leftArr.value = r.data.data
    console.log(leftArr.value)
  })
}
loadList()

// 侧边栏的监听事件
let rightArr = ref([])
function leftMenuChange(index) {
  console.log(index)
  loadList()
  console.log(leftArr.value[index])
  axios
    .get("http://localhost:1337/api/v1/products", {
      params: {
        page: 1,
        per: 66,
        name: leftArr.value[index].name,
        category: leftArr.value[index].id,
      },
    })
    .then((r) => {
      console.log(r.data)
      rightArr.value = r.data.data
      console.log(rightArr.value)
      rightitemArr.value = rightArr.value
      console.log(rightitemArr.value)
    })
}
// 右边详细商品信息
let rightitemArr = ref([])
</script>

<style scoped>
.nav {
  background-color: #ee0a24;
  color: white;
}
.leftList,
.rightList {
  height: calc(100vh - 96px);
  float: left;
}
.img {
  width: 100%;
}
</style>
